<template>
	<view class="imagecontent">
		<movable-area scale-area class="movable-area">
			<movable-view class="movable-view" direction="all" scale="true" scale-min="1" scale-max="4"
				:scale-value="scale">
				<swiper @change="changeSwiper" class="lookimg" :circular="circular" :indicator-dots="indicatorDots"
					:autoplay="autoplay" :duration="duration" :current="imgId">
					<swiper-item :id="index" v-for="(item,index) in largerList" :key="index">
						<!-- <image class="lookimg_img" :src="imgId == index?item.filePath_W:''" mode="aspectFit">
						</image> -->
						<video class="uni-popup-video" enable-play-gesture id="myVideo" :src="item.filePath_W" controls
							@error="fileMapError" v-if="item.fileShow" :show-fullscreen-btn="showFullBtn" :muted="muted" :autoplay="autoplay" :auto-pause-if-navigate="autoPause" :auto-pause-if-open-native="autoPause"/>
						
						<image class="lookimg_img" :src="Math.abs(index - imgId)  < 2 ? item.filePath_W : ''"
							mode="aspectFit" v-else />
						
					</swiper-item>
				</swiper>
			</movable-view>
		</movable-area>
		<view class="page">
			<text class="text">{{imgId + 1}}/{{largerList.length}}</text>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				scale: 1,
				picList: [],
				indicatorDots: false,
				autoplay: false,
				duration: 500,
				circular: true,
				current: 0,
				isShowSwiper: false,
				larger: {},
				list: {},
				imgId: '',
				largerList: [],
				aaa: 1,
				showFullBtn:false,
				muted:true,
				autoplay:false,
				autoPause:true,
			};
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.larger = option
			this.list = JSON.parse(option.arr) //单个数据
			this.largerList = JSON.parse(option.arr2) //全部数据
			console.log('***************',this.list);
			console.log(this.largerList);
			this.getImgLarger()
		},
		methods: {
			dblclick() {
				if (this.scale == 10) {
					this.scale = 1;
				} else {
					this.scale = 10;
				}
			},
			getImgLarger() {
				// this.largerList = res
				//找到全部数组里的当前点击的这一项 
				this.imgId = this.largerList.map(item => item.imgId).indexOf(this.list.imgId)
				this.imgId + 1
				// console.log(this.imgId);
			},
			changeSwiper(e) {
				console.log(e);
				this.scale = 1;
				this.imgId = e.detail.current
			},
		}
	};
</script>

<style lang="scss" scoped>
	.uni-popup-video{
		margin: auto;
		width: 100vw;
		height: 100vh;
	}
	.prj_imgs_content {
		margin-left: 20rpx;
	}

	.movable-view {
		height: 100%;
		width: 100%;
	}

	.page {
		position: absolute;
		width: 100%;
		bottom: 20rpx;
		text-align: center;

		.text {
			color: #fff;
			font-size: 26rpx;
			background-color: rgba(0, 0, 0, 0.5);
			padding: 3rpx 16rpx;
			border-radius: 20rpx;
			user-select: none;
		}
	}

	.movable-area {
		height: 100%;
		width: 100%;
		position: fixed;
		overflow: hidden;
	}

	.lookimg {
		display: block;
		position: fixed;

		width: 100%;
		height: 90%;
		/* 重点来咯 */
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 3;
		-webkit-transform: translate(-50%, -50%);
	}

	.lookimg_img {
		display: block;
		position: fixed;

		width: 100%;
		height: 100%;
		/* 重点来咯 */
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 3;
		-webkit-transform: translate(-50%, -50%);
	}


	.imagecontent {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 1);
		top: 0;
		position: fixed;
	}
	#myVideo {
		width: 100%;
		height: 100%;
	}
</style>
